<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>内容页</title>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/content.css"/>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/style.css"/>
	<script src="__PUBLIC__/js/jquery-1.7.2.min.js"></script>
	<script src="__PUBLIC__/js/index.js"></script>
</head>
<body>
	<!--网页右侧导航条开始-->
	<div id="web-left">
		<ul class="top">
			<li class="login">
				<a href="">
					<span class="login-logo"></span>
				</a>
				<div class="display-box">
					<span class="trigon"></span>
					<span class="box-close"></span>
					<if value="$hd.session.uid&&$hd.session.user">
						<!--登陆后替换部分-->
						<div class="login-after">
							<p class="login-logo"></p>
							<p class="username">用户名：{$hd.session.user}</p>
						</div>
						<!--登陆后替换部分结束-->
					<else/>
						<!--未登录替换-->
						<p class="login-logo-no"></p>
						<p class="login-reg">
							你好！请
							<a href="{|U:'Login/index'}">登录</a>
							 | 
							 <a href="{|U:'Reg/index'}">注册</a>
						</p>
						<!--未登录替换结束-->
					</if>
					<p class="my-order-box">
						<a href="" class="my-order">我的订单</a>
						<a href="" class="my-collect">我的收藏</a>
					</p>
				</div>
			</li>
			<li class="shop-car">
				<a href="{|U:'Cart/index'}">
					<span class="top-line"></span>
					<span class="bottom-line"></span>
					<span class="car-logo"></span>
					<span class="text">购物车</span>
					<span class="num">
						<if value="$hd.session.cart.total_rows">
							{$hd.session.cart.total_rows}
						<else/>
							0
						</if>
					</span>
				</a>
			</li>
			<li class="my-money">
				<a href="">
					<span></span>
				</a>
				<div class="display-box-l">
					我的资产
					<span class="trigon"></span>
				</div>
			</li>
			<li class="my-hope">
				<a href="">
					<span></span>
				</a>
				<div class="display-box-l">
					我的心愿单
					<span class="trigon"></span>
				</div>
			</li>
			<li class="my-look">
				<a href="">
					<span></span>
				</a>
				<div class="display-box-l">
					我看过的
					<span class="trigon"></span>
				</div>
			</li>
			<li class="my-want">
				<a href="">
					<span>充</span>
				</a>
				<div class="display-box-l">
					我要充值
					<span class="trigon"></span>
				</div>
			</li>
		</ul>
		<ul class="bottom">
			<li class="code">
				<a href="">
					<span></span>
				</a>
			</li>
			<li class="kefu">
				<a href="">
					<span></span>
				</a>
			</li>
		</ul>
		<div class="top-back">
				<a href="javascript:;">
					<span></span>
				</a>
				<div class="display-box display-box-l">
					返回顶部
					<span class="trigon"></span>
				</div>
		</div>
	</div>
	<!--网页右侧导航条结束-->
	<!--头部开始-->
	<div id="top">
		<div class="top-box">
			<ul class="welcome">
				<if value="$hd.session.uid&&$hd.session.user">
					<!--替换-------------------------------->
					<li>欢迎您,</li>
					<li><a href="{|U:'Center/index'}" class="login">{$hd.session.user}</a></li>
					<li>[ <a href="{|U:'Common/out'}" class="login">退出</a> ]</li>
					<!-- 登陆替换结束 -->
				<else/>
					<!-- 未登录替换 -->
					<li>欢迎来到聚美！</li>
					<li><a href="{|U:'Login/index'}">请登录</a></li>
					<li><a href="{|U:'Reg/index'}">快速注册</a></li>
					<!-- 未登录替换结束 -->
				</if>
			</ul>
			<p class="city">送至 <span>北京</span><span class="city-logo"></span></p>
			<ul class="right">
				<li><a href="">订单查询</a></li>
				<li class="collect">
					<span class="collect-logo"></span>
					<a href="">收藏的品牌</a>
				</li>
				<li class="myjumei">
					<a href="">我的聚美</a>
					<span class="myjumei-logo"></span>
					<ul class="myjumei-list">
						<li><a href="">我的订单</a></li>
						<li><a href="">我的余额</a></li>
					</ul>
				</li>
				<li class="phone"><span class="line"></span><span class="phone-logo"></span><a href="">手机聚美</a></li>
				<li class="koubei">
					<a href=""><span class="koubei-logo"></span>口碑中心</a></li>
				<li class="look">
					<span class="line"></span>
					<a href=""><span class="look-logo"></span>查看分类</a></li>
				<li class="more">
					<a href="">更多</a>
					<span class="more-logo"></span>
				</li>
			</ul>
		</div>
	</div>
	<!--头部结束-->
	<!--聚美标和购物车栏开始-->
	<div id="logo-car">
		<div class="logo-car-box">
			<a href="" class="home-logo"></a>
			<div class="car-box">
				<a href="{|U:'Cart/index'}" class="car">去购物车结算</a>
				<ul class="cart-good-list">
					<if value="!$hd.session.cart.goods">
					<li class="none">
						<p>购物车中还没有商品，</p>
						<p>快去挑选心爱的商品吧！</p>
					</li>
					<else/>
					<foreach from="$hd.session.cart.goods" key="$k" value="$v">
						<li class="cart-good">
							<img src="__ROOT__/{$v.options.logo}" alt="" class="cart-good-img" />
							<a href="{|U:'Content/index',array('gid'=>$v['id'])}" class="cart-good-title" target="_blank">{$v.name}</a>
							<p class="cart-good-money"><span>￥{$v.price}</span> x {$v.num}</p>
						</li>
					</foreach>
					<div class="bottom-go">
						<div class="money-left">
							<p class="good-num">
								共 <span>{$hd.session.cart.total_rows}</span> 件商品
							</p>
							<p class="good-money">
								共计<span class="logo">￥</span><span>{$hd.session.cart.total}</span>
							</p>
						</div>
						<a href="{|U:'Cart/index'}" class="go-pay">去购物车结算</a>
					</div>
					</if>
				</ul>
			</div>
		</div>
	</div>
	<!--聚美标和购物车栏结束-->
	<script type="text/javascript">
		$('.car-box').hover(function() {
			$('.cart-good-list').show();
		}, function() {
			$('.cart-good-list').hide();
		});
	</script>
	<!--物品简介开始-->
	<div id="about-good">
		<div class="top">
			<div class="top-left">
				<div class="good-img-box">
					<div id="box"></div>
					<div id="gai"></div>
					<foreach from="$data['middle_pic']" key="$k" value="$v">
						<img src="__ROOT__/{$v}" alt="" class="good-img" <if value="!$k">style="display:block"</if>/>
					</foreach>
				</div>
				<ul class="spic-box">
					<foreach from="$data['small_pic']" key="$k" value="$v">
						<li class="spic"><img src="__ROOT__/{$v}" alt="" /></li>
					</foreach>
				</ul>
				<div class="big-img-box">
					<foreach from="$data['big_pic']" key="$k" value="$v">
						<img src="__ROOT__/{$v}" alt="" class="big-img"<if value="!$k">style="display:block"</if>/>
					</foreach>
				</div>
				<script type="text/javascript">
				$(function(){
					$('#about-good .top .top-left .spic-box .spic').mouseenter(function() {
						c=$(this).index();
						$('#about-good .top .top-left .good-img-box .good-img').eq(c).fadeIn(100).siblings('.good-img').hide();
						$('#about-good .top .top-left .big-img-box .big-img').eq(c).show().siblings('.big-img').hide();
						$('#about-good .top .top-left .spic-box .spic').eq(c).css('border','2px solid #EB155B').siblings('li').css('border','2px solid transparent');
					});
					$('#about-good .top .top-left .good-img-box #gai').hover(function() {
						$('#about-good .top .top-left .good-img-box #box').show();
						$('#about-good .top .top-left .big-img-box').show();
					}, function() {
						$('#about-good .top .top-left .good-img-box #box').hide();
						$('#about-good .top .top-left .big-img-box').hide();
					});
					$('#about-good .top .top-left .good-img-box #gai').mousemove(function(e) {
						// 获取事件
						var ev = window.event || e;
						// 鼠标距离事件左侧和上侧距离
						var mouse_top = ev.offsetY || ev.layerY;
						var mouse_left = ev.offsetX || ev.layerX;
						// document.title = mouse_left + '|' + mouse_top;
						// 计算色块离事件的距离
						var box_top = mouse_top-87.5;
						var box_left = mouse_left-87.5;
						if(box_top<0){
							box_top=0;
						}
						if(box_top>175){
							box_top=175;
						}
						if(box_left<0){
							box_left=0
						}
						if (box_left>175){
							box_left=175;
						}
						$('#box').css({top: box_top,left: box_left});
						var big_top = box_top*-(400/175);
						var big_left = box_left*-(400/175);
						$('#about-good .top .top-left .big-img-box .big-img').css({top: big_top,left: big_left});
					});
				})
				</script>
				<p class="share">
					<span style="width: 24px;">分享</span>
					<span class="share-logo1"></span>
					<span class="share-logo2"></span>
					<span class="share-logo3"></span>
					<span class="share-logo4"></span>
					<span class="share-logo5"></span>
					<span class="share-logo6"></span>
				</p>
			</div>
			<div class="top-right">
				<div class="right-first">
					<p class="first-title">{$data.gname}</p>
					<p class="first-title-s">{$data.ename}</p>
					<div class="brand">
						<img src="__ROOT__/{$data.logo}" alt="" class="brand-logo" />
						<!-- <p class="brand-title">United Kingdom</p> -->
						<p class="brand-title-s">{$data.bname}</p>
					</div>
				</div>
				<p class="right-second">
					<span>{$data.sale}折/</span>
					{$data.title} 
				</p>
				<div class="right-third">
					<p class="money">
						<span class="logo">¥</span>
						<span class="now_money" money="{$data.new_price}">{$data.new_price}</span>
						<span class="old-money">¥{$data.old_price}</span>
						<span class="more">价格明细></span>
					</p>
					<div class="title">
						<span class="super">极速免税</span>
						<p class="super-title">极速免税店，最快24小时到货<span>（比海外发货快15天）</span></p>
						<p class="super-title-s">极速免税店，满2件或满299包邮（邮费5元） | 限购1件 </p>
					</div>
					<div class="color">
						<span>颜色:</span>
						<ul class="attr">
							<foreach from="$data['color']" key="$k" value="$v">
								<li>
									<a href="javascript:;" gaid="{$v['gaid']}">{$v.gavalue}</a>
								</li>
							</foreach>
						</ul>
						<script type="text/javascript">
							$('#about-good .top .top-right .right-third .color .attr li').click(function() {
								$(this).addClass('onclick').siblings('li').removeClass('onclick');
							});
						</script>
					</div>
					<div class="size">
						<span>大小:</span>
						<ul class="attr">
							<foreach from="$data['size']" key="$k" value="$v">
								<li>
									<a href="javascript:;" gaid="{$v['gaid']}">{$v.gavalue}</a>
								</li>
							</foreach>
						</ul>
						<script type="text/javascript">
							$('#about-good .top .top-right .right-third .size .attr li').click(function() {
								$(this).addClass('onclick').siblings('li').removeClass('onclick');
							});
						</script>
						<p style="margin-top:5px;float:left;display:none" id="total-box">库存: <strong id="total">0</strong> 件</p>
					</div>
				</div>
				<script type="text/javascript">
				$(function(){
					$('.attr li').click(function() {
						if ($('.onclick').length>=2) {
							var group = '';
							$.each($('.onclick'), function(k, v) {
								 group += ','+$(this).find('a').attr('gaid');
							});
							$.ajax({
								url: "{|U:'Content/ajax_size'}",
								type: 'POST',
								dataType: 'json',
								data: {group:group,gid:{$hd.get.gid}},
								success:function(data){
									$('#total').html(data[0]);
									$('#total-box').show();
									if (data[0]==0) {
										$('.join-car').addClass('null');
										$('.join-car').attr('on', '0');
									}else{
										$('.join-car').removeClass('null');
										$('.join-car').attr('on', '1');
									}
									var money = $('.now_money').attr('money');
									var now_money = money*1+data[1];
									$('.now_money').html(now_money+'.00');
								}
							})
						};
					});
					$('.join-car').click(function() {
						if ($('.null').length<1 && $('.onclick').length>=2) {
							var group = '';
							$.each($('.onclick'), function(k, v) {
								 group += ','+$(this).find('a').attr('gaid');
							});
							var path = "{|U:'Index/Content/index'}";
							var price = $('.now_money').html();
							$.ajax({
								url: "{|U:'Cart/ajax_cart'}",
								type: 'POST',
								dataType: 'json',
								data: {group:group,gid:{$hd.get.gid},price:price},
								success:function(data){
									// <a href="{|U:'Content/index',array('gid'=>$v['id'])}" class="cart-good-title" target="_blank">{$v.name}</a>
									var str ='';	
									$.each(data['cart']['goods'], function(k, v) {
										str += '<li class="cart-good">';
										str += '<img src="';
										str += '__ROOT__/'+v.options.logo+'"';
										str += 'alt="" class="cart-good-img" />';
										str += '<a href="';
										str += path;
										str += '/gid/'
										str += v.id;
										str += '"';
										str += 'class="cart-good-title" target="_blank">';
										str += v.name;
										str += '</a><p class="cart-good-money"><span>￥';
										str += v.price;
										str += '</span> x ';
										str += v.num;
										str += '</p></li>';
									});
									str += '<div class="bottom-go"><div class="money-left">';
									str += '<p class="good-num">';
									str += '共 <span>';
									str += data['cart']['total_rows'];
									str += '</span> 件商品</p>';
									str += '<p class="good-money">共计<span class="logo">￥</span><span>';
									str += data['cart']['total'];
									str += '</span></p></div>';
									str += '<a href="';
									str += "{|U:'Index/Cart/index'}";
									str += '" class="go-pay">';
									str += '去购物车结算</a></div></div>';
									
									$('.cart-good-list').html(str);
									$('#join-success').fadeIn(300);
								}
							})
						}
					});
				})
				</script>
				<div class="right-fourth">
					<a href="javascript:;" class="join-car" on="0">
						加入购物车
					</a>
				</div>
			</div>
		</div>
		<div class="bottom">
			<ul>
				<li class="logo">
					<a href="" class="zheng1"></a>
					<a href="" class="zheng2"></a>
				</li>
				<li class="logo">
					<a href="" class="shan1"></a>
					<a href="" class="shan2"></a>
				</li>
				<li class="logo">
					<a href="" class="rmb1"></a>
					<a href="" class="rmb2"></a>
				</li>
				<li class="logo">
					<a href="" class="seven1"></a>
					<a href="" class="seven2"></a>
				</li>
			</ul>
		</div>
	</div>
	<!--物品简介结束-->
	<!--物品详情开始-->
	<div id="good-detail">
		<!--导航开始-->
		<ul class="nav">
			<li><a href="#one">商品信息</a></li>
			<li><a href="#two">商品详情</a></li>
			<!-- <li><a href="">使用方法</a></li> -->
			<!-- <li><a href="">商品实拍</a></li> -->
			<!-- <li><a href="">用户口碑</a></li> -->
			<li><a href="#tried">关于极速免税店</a></li>
		</ul>
		<!--导航结束-->
		<!--商品信息开始-->
		<div class="good-news" id="one">
			<p class="logo"></p>
			<ul class="title">
				<li>商品名称：</li>
				<!-- <li>商品型号：</li> -->
				<li>品        牌：</li>
				<li>分        类：</li>
				<!-- <li>功        效：</li> -->
				<li>适用人群：</li>
				<!-- <li style="line-height: 50px;">保质期限：</li> -->
				<!-- <li>原产国家：</li> -->
				<li>特别说明：</li>
			</ul>
			<ul class="text">
				<li>{$data.gname}</li>
				<!-- <li>15ml(702000099)</li> -->
				<li>{$data.bname}</li>
				<li>{$data.cname}</li>
				<!-- <li>保湿,补水,滋润,修护</li> -->
				<li>所有人群，特别是渴望拥有美丽的MM</li>
				<!-- <li>如果未开始使用，保质期三年。开始使用后，请参考产品上的标志，6M表示开盖后6个月内用完，12M表示12个月内用完，依此类推。</li> -->
				<!-- <li>英国</li> -->
				<li>全新正品，具体包装以收到的实物为准</li>
			</ul>
			<img src="__ROOT__/{$data.gpic}" alt="" class="news-img" />
		</div>
		<!--商品信息结束-->
		<!--商品详情开始-->
		<div class="good-details" id="two">
			<p class="logo"></p>
			{$data.gdetail}
		</div>
		<!--商品详情结束-->
		<!--使用方法开始-->
		<!-- <div class="good-use">
			<p class="logo"></p>
			<p class="text"> 洁肤调理后，取适量轻柔按摩眼部肌肤即可。</p>
			<p class="text">温馨提示：护肤品成分各有不同，敏感性肌肤的人士请先在耳后进行测试后再使用哦！</p>
		</div> -->
		<!--使用方法结束-->
		<!--商品实拍开始-->
		<!-- <div class="good-photo">
			<p class="logo"></p>
			<img src="__PUBLIC__/images/p1.jpg" alt="" class="photo-img" />
			<img src="__PUBLIC__/images/p2.jpg" alt="" class="photo-img" />
			<img src="__PUBLIC__/images/p3.jpg" alt="" class="photo-img" />
			<img src="__PUBLIC__/images/p4.jpg" alt="" class="photo-img" />
		</div> -->
		<!--商品实拍结束-->
		<!--用户口碑开始-->
		<!--<div class="good-user">
			<p class="logo"></p>
		</div>-->
		<!--用户口碑结束-->
		<!--关于聚美-->
		<div class="about-jumei" id="tried">
			<p class="logo"></p>
			<img src="__PUBLIC__/images/about1.jpg" alt="" class="about-img" />
			<img src="__PUBLIC__/images/about2.jpg" alt="" class="about-img" />
			<img src="__PUBLIC__/images/about3.jpg" alt="" class="about-img" />	
		</div>
		<!--关于聚美结束-->
		<!--售后&问题开始-->
		<div class="question">
			<p class="logo1"></p>
			<img src="__PUBLIC__/images/shouhou.jpg" alt="" class="q-img" />
			<p class="logo2"></p>
			<img src="__PUBLIC__/images/未标题-1.jpg" alt="" class="q-a" />
			<div class="q-btn">点击查看 +</div>
		</div>
		<!--售后&问题结束-->
		<script type="text/javascript">
		$('.q-btn').toggle(function() {
			$(this).html('点击收起 +');
			$('.q-a').slideDown(500)
		}, function() {
			$(this).html('点击查看 +');
			$('.q-a').slideUp(500);
		});
		
		</script>
	</div>
	<!--物品详情结束-->
	<!--添加购物车提示成功-->
	<div id="join-success">
		<div id="success-box">
			<p class="success">
				<span class="success-logo"></span>
				已成功加入购物车
			</p>
			<p class="where">
				<a href="javascript:;" class="go-on">继续逛逛</a>
				<a href="{|U:'Cart/index'}" class="go-pay">去购物车结算</a>
			</p>
			<span class="close"></span>
		</div>
	</div>
	<!--添加购物车提示成功结束-->
	<script type="text/javascript">
		$('#success-box .close').click(function() {
			$('#join-success').fadeOut(300);
		});
		$('.go-on').click(function() {
			$('#join-success').fadeOut(300);
		});
	</script>
</body>
</html>